App.require(function () {
    var app = App.getCurrent();
    app.defineComponent("str-uploader", {
        clear: function () {
            var domList = this.domList;
            domList.input.value = "";
            domList.filedetail.textContent = "";
        },
        blur: function () {
            this.domList.input.blur();
        },
        focus: function () {
            this.domList.input.focus();
        },
        showUploader: function () {
            var event = document.createEvent("MouseEvents");
            event.initMouseEvent("click", true, true, document.defaultView);
            this.domList.label.dispatchEvent(event)
        },
        render: function (next) {
            this.computeData();
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        getDomObj: function () {
            this.attachDom("input", "input")
                .attachDom("label", "label")
                .attachDom("[role='uploader']", "container")
                .attachDom(".uploader-file-detail", "filedetail")
                .attachDom("[role='help']", "helpContainer")
                .attachEvent("input", "focus", this.focusHandler, false)
                .attachEvent("input", "blur", this.blurHandler, false)
                .attachEvent("input", "change", this.changeHandler, false);
        },
        focusHandler: function (ev) {
            this.dispatchCustomEvent("uploaderfocus", { event: ev, component: this, target: ev.currentTarget });
        },
        blurHandler: function (ev) {
            this.dispatchCustomEvent("uploaderblur", { event: ev, component: this, target: ev.currentTarget });
        },
        changeHandler: function (ev) {
            var files = ev.target.files;
            var content = [].slice.call(files).map(function (item) {
                return item.name
            }).join("; ");
            this.domList.filedetail.textContent = content;
            this.dispatchCustomEvent("uploaderchange", { event: ev, component: this, target: ev.currentTarget });
        },
        computeData: function () {
            var property = this.property;
            property.name = property.name || this.uid;
            property.label = property.label || property.name;
            property.type = property.type || "btn";
            property.form = property.form || "";
            property.accept = property.accept || "";
            property.capture = property.capture || "";
            property.multiple = typeof property.multiple !== "undefined" ? "multiple" : "";
            property.required = typeof property.required !== "undefined" ? "required" : "";
            property.disabled = typeof property.disabled !== "undefined" ? "disabled" : "";
            property.hiddenbottom = typeof property.hiddenbottom !== "undefined" ? "hiddenbottom" : "";
            this.createInputAddtionAttribute(property);
            property.class = property.class || "";
            this.data.propertystr = this.createPropertyStr({
                class: property.class,
                type: property.type
            })
        },
        createInputAddtionAttribute: function (property) {
            var result = [];
            if (property.required) result.push("required");
            if (property.disabled) result.push("disabled");
            if (property.accept) result.push("accept='" + property.accept + "'");
            if (property.capture) result.push("capture='" + property.capture + "'");
            if (property.multiple) result.push("multiple");
            if (property.form) result.push("form='" + property.form + "'");
            this.data.addtionattribute = result.join(" ");
        },
        get files() {
            return this.domList.input.files;
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class === value) return;
            this.domList.container.className = value;
            this.property.class = value;
        },
        get capture() {
            return this.property.capture;
        },
        set capture(value) {
            if (value === this.property.capture) return;
            this.property.capture = value;
            this.domList.input.capture = value;
        },
        get accept() {
            return this.property.accept;
        },
        set accept(value) {
            if (value === this.property.accept) return;
            this.domList.input.accept = value;
            this.property.accept = value;
        },
        set assistive(obj) {
            var property = this.property, oldType = property.assistivetype;
            var container = this.domList.helpContainer;
            if (!obj.type) {
                if (oldType) {
                    container.removeChild(container.firstElementChild);
                }
                property.assistivetext = obj.text;
                property.assistivetype = obj.type;
                return;
            }
            if (!oldType) {
                var div = document.createElement("div");
                div.className = "addtion-" + obj.type;
                div.textContent = obj.text;
                container.appendChild(div);
            }
            else {
                var target = container.firstElementChild;
                if (oldType !== obj.type) {
                    target.className =" addtion-" + obj.type;
                }
                target.textContent = obj.text;
            }
            property.assistivetext = obj.text;
            property.assistivetype = obj.type;
        },
        get assistive() {
            var property = this.property;
            return {
                type: property.assistivetype,
                text: property.assistivetext
            }
        },
        get assistivetype() {
            return this.property.assistivetype;
        },
        get assistivetext() {
            return this.property.assistivetext;
        },
        get hiddenbottom() {
            return this.property.hiddenbottom;
        },
        set hiddenbottom(value) {
            value = value ? "hiddenbottom" : "";
            if (value === this.property.hiddenbottom) return;
            var classList = this.domList.helpContainer.classList;
            if (value) {
                classList.add(value);
            }
            else {
                classList.remove(value);
            }
            this.property.hiddenbottom = value;
        },
        get multiple() {
            return this.property.multiple;
        },
        set multiple(value) {
            value = value ? "multiple" : "";
            if (this.property.multiple === value) return;
            var input = this.domList.input;
            if (value) input.setAttribute("multiple", "multiple");
            else input.removeAttribute("multiple");
            this.property.multiple = value;
            var content = [].slice.call(input.files).map(function (item) {
                return item.name
            }).join("; ");
            this.domList.filedetail.textContent = content;
        },
        set name(value) {
            if (this.property.name === value) return;
            var input = this.domList.input, label = this.domList.label;
            input.name = value;
            input.id = value;
            label.htmlFor = value;
            this.property.name = value;
        },
        get name() {
            return this.property.name;
        },
        set type(value) {
            if (value === this.property.type) return;
            this.domList.container.setAttribute("type", value);
            this.property.type = value;
        },
        get type() {
            return this.property.type;
        },
        set required(value) {
            value = value ? "required" : "";
            if (value === this.property.required) return;
            this.property.value = value;
            if (value) this.domList.input.setAttribute("required", "required");
            else this.domList.input.removeAttribute("required");
        },
        get required() {
            return this.property.required;
        },
        set disabled(value) {
            value = value ? "disabled" : "";
            if (value === this.property.disabled) return;
            this.property.value = value;
            if (value) this.domList.input.setAttribute("disabled", "disabled");
            else this.domList.input.removeAttribute("disabled");
        },
        get disabled() {
            return this.property.disabled;
        },
        get form() {
            return this.property.form;
        },
        set form(value) {
            this.property.form = value;
            this.domList.input.form = value;
        },
    });
})